<template>
  <van-sticky>
    <div class="kickback_header">
      <div class="left">
        <div>
          可提现(元): <span>{{ CashableAmount }}</span>
        </div>
        <div>
          累计提现(元): <span>{{ CumulativeAmount }}</span>
        </div>
      </div>
      <div class="right" @click="OnCashable">立即提现</div>
    </div>

    <van-tabs
      v-model:active="TabActive"
      type="card"
      sticky
      background="#288BD6"
      @click-tab="OnTab"
    >
      <van-tab
        v-for="item in TabList"
        :title="item.title"
        :name="item.status"
      ></van-tab>
    </van-tabs>
  </van-sticky>

  <div class="kickback">
    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="OnLoad"
      >
        <div class="list">
          <div
            class="item"
            v-for="item in list"
            @click="OnceCashable(item)"
            :key="item.id"
          >
            <div class="left">
              <div class="img">
                <img :src="item.product?.thumbs_text" />
              </div>
              <div class="content">
                <div class="nickname">订单号：{{ item.order_code }}</div>
                <div class="tel">商品名称：{{ item.product.name }}</div>
              </div>
            </div>
            <div class="right">
              <div class="status">{{ item.status_text }}</div>
              <div class="money">{{ item.amount }}</div>
            </div>
          </div>

          <van-back-top :bottom="'80'" />
        </div>
      </van-list>
    </van-pull-refresh>
  </div>

  <Tabbar />
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 用户信息
const business = proxy.$business;
// 分销会员数据
const list = ref([]);
// 数据总条数
const ListCount = ref(0);
// 刷新状态
const refreshing = ref(false);
// 懒加载状态
const loading = ref(false);
// 加载状态
const finished = ref(false);
// 当前页
const page = ref(1);
// tab选中状态
const TabActive = ref(0);
// tab数据
const TabList = ref([
  {
    title: "未提现",
    status: 0,
  },
  {
    title: "已提现",
    status: 1,
  },
]);
// 可提现
const CashableAmount = ref("0.00");
// 累计提现
const CumulativeAmount = ref("0.00");

// 下拉刷新
const OnRefresh = () => {
  // 清空查询参数
  finished.value = false;
  page.value = 1;
  list.value = [];
  loading.value = true;

  // 加载数据方法
  setTimeout(OnLoad, 200);
};

// 上拉加载
const OnLoad = async () => {
  // 如果等于true说明当前进行下拉刷新
  if (refreshing.value) {
    // 结束下拉刷新
    refreshing.value = false;
  }

  // 组装数据
  let params = {
    busid: business.value.id,
    page: page.value,
    status: TabActive.value,
  };

  // 发起请求
  let result = await proxy.$http.post({
    url: "/sale/money",
    params,
  });

  // 请求发送完毕后，加载状态也就完毕了
  loading.value = false;

  // 后端不管记录是否有，都会返回可提现佣金和累计佣金，所以优先在这里处理
  CumulativeAmount.value = result.data.CumulativeAmount;
  CashableAmount.value = result.data.CashableAmount;

  if (result.code === 1) {
    // 合并数组
    list.value = list.value.concat(result.data.list);
    ListCount.value = result.data.count;

    // 如果没有更多数据了，就说明已经加载到底了
    if (list.value.length === ListCount.value) {
      finished.value = true;

      return false;
    }

    page.value = page.value + 1;
  } else {
    finished.value = true;

    proxy.$fail(result.msg);
  }
};

// tab点击事件
const OnTab = debounce(() => {
  OnRefresh();
}, 1500);

// 单独体现

// 提现
const OnCashable = async () => {
  proxy
    .$confirm({
      title: "佣金提现",
      message: "是否确认提现全部佣金？",
    })
    .then(async () => {
      let params = {
        busid: business.value.id,
      };

      let result = await proxy.$http.post({
        url: "/sale/cashable",
        params,
      });

      if (result.code === 1) {
        proxy.$success({
          message: result.msg,
          onClose: () => {
            // 重新计算累计佣金
            let total =
              parseFloat(result.data.CumulativeAmount) +
              parseFloat(CumulativeAmount.value);

            // 重新赋值
            CumulativeAmount.value = total.toFixed(2);
            CashableAmount.value = "0.00";
            OnRefresh();
          },
        });
      } else {
        proxy.$fail(result.msg);
      }
    })
    .catch((err) => {});
};

const OnceCashable = async (item) => {
  proxy
    .$confirm({
      title: "佣金提现",
      message: "是否确认提现该订单的佣金",
    })
    .then(async () => {
      let params = {
        busid: business.value.id,
        id: item.id,
      };
      let result = await proxy.$http.post({
        url: "/sale/cashable",
        params,
      });
      if (result.code === 1) {
        proxy.$success({
          message: result.msg,
          onClose: () => {
            // 重新计算累计佣金
            let total =
              parseFloat(result.data.CumulativeAmount) +
              parseFloat(CumulativeAmount.value);

            // 重新赋值
            CumulativeAmount.value = total.toFixed(2);
            CashableAmount.value = "0.00";
            OnRefresh();
          },
        });
      } else {
        proxy.$fail(result.msg);
      }
    })
    .catch((err) => {});
};
</script>

<style scoped>
@import url("/assets/css/SaleMoney.css");
</style>